<div class="modal-header">
  <ng-container>
    <div class="modal-title">{{ record.id ? '编辑' : '新建' }}</div>
  </ng-container>
</div>

<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>

<div *ngIf="i">
  <form nz-form [formGroup]="validateForm">
    <input nz-input hidden formControlName="id"/>
    <div nz-row [nzGutter]="24">
      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="identify">标识</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="唯一标识必填！">
            <input nz-input formControlName="identify" placeholder="唯一标识"/>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="name">名称</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="名称必填！">
            <input nz-input formControlName="name" placeholder="角色名称"/>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="policies" nzRequired>权限策略</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="权限策略必填！">
            <input formControlName="policies" hidden>
            <nz-transfer [nzListStyle]="{ 'width': '45%' }" [nzDataSource]="policyList"
                         nzShowSearch (nzChange)="transferChange($event)"
                         [nzTitles]="['未分配', '已有策略']"></nz-transfer>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzRequired nzFor="menus">菜单</nz-form-label>
          <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="菜单必填！">
            <nz-tree-select #treeSelectComponent [nzNodes]="menuOptionList"
                            formControlName="menus" nzShowSearch nzCheckable nzPlaceHolder="可见菜单">
            </nz-tree-select>
          </nz-form-control>
        </nz-form-item>
      </div>

      <div nz-col [nzSpan]="20">
        <nz-form-item>
          <nz-form-label [nzSpan]="8" nzFor="description">描述</nz-form-label>
          <nz-form-control [nzSpan]="16">
            <textarea rows="3" nz-input formControlName="description"></textarea>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
  </form>
</div>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
  <button nz-button type="submit" nzType="primary" (click)="submitForm(validateForm.value)"
          [disabled]="!validateForm.valid" [nzLoading]="http.loading">保存
  </button>
</div>

